<template>
	<view class="w-picker">
		<div class="mask" :class="{'show':showPicker}" @tap="maskTap" catchtouchmove="true"></div>
		<view class="w-picker-cnt" :class="{'show':showPicker}">
			<view class="w-picker-hd" catchtouchmove="true">
				<view class="w-picker-btn" @tap="pickerCancel">取消</view>
				<view class="w-picker-btn" :style="{'color':themeColor}" @tap="pickerConfirm">确定</view>
			</view>
			<view class="w-picker-view" v-if="mode=='date'||mode=='dateTime'||mode=='yearMonth'||mode=='hours'">
				<picker-view indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column v-if="mode!='yearMonth'">
						<view class="item" v-for="(item,index) in data.days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column v-if="mode=='hours'||mode=='dateTime'">
						<view class="item" v-for="(item,index) in data.hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column v-if="mode=='dateTime'">
						<view class="item" v-for="(item,index) in data.minutes" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='time'">
				<picker-view indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.minutes" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='region'">
				<picker-view indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.provinces" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.citys" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.areas" :key="index">{{item.name}}</view>
					</picker-view-column>
					<!-- <picker-view-column>
						<view class="item" v-for="(item,index) in data.streets" :key="index">{{item.name}}</view>
					</picker-view-column> -->
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='column'">
				<picker-view indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.columns" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		initPicker,
		initDays
	} from "./date-data/util.js";
	export default {
		data() {
			return {
				result: [],
				data: {},
				checkArr: [],
				checkValue: [],
				checkCity: '',
				pickVal: [], //数组顺序
				returnValue: '', //返回的值
				areaValue: '', //地址编号
				showPicker: false,
				test: []
			};
		},
		computed: {

		},
		props: {
			mode: {
				type: String,
				default () {
					return "date"
				}
			},
			themeColor: {
				type: String,
				default () {
					return "#007AFF"
				}
			},
			startYear: {
				type: String,
				default () {
					return String(new Date().getFullYear())
				}
			},
			endYear: {
				type: String,
				default () {
					return String(new Date().getFullYear() + 5)
				}
			},
			defaultVal: {
				type: Array,
				default () {
					return [0, 0, 0, 0, 0]
				}
			},
			showNow: { //目前用于date模式显示当前日期
				type: Boolean,
				default: false
			},
			columns: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		watch: {
			mode() {
				this.initData();
			},
			columns() {
				this.initData();
			}
		},
		methods: {
			maskTap() {
				this.showPicker = false;
			},
			show() {
				this.showPicker = true;
				if (this.mode == 'date' || this.mode == 'dateTime' || this.mode == 'yearMonth' || this.mode=='hours' ) {
					this.initData();
				}
			},
			hide() {
				this.showPicker = false;
			},
			//获取所有省
			getAllRegion() {
				return new Promise(resolve => {
					this.$ajax.GetAreas().then(res => {
						resolve(res.data);
					}).catch(res2 => {
						resolve(res2.data.data);
					})
				})
			},
			// 根据父id获取下级地址
			getDatas(id) {
				let dataA = {
					AreasId: id,
				}
				return new Promise(resolve => {
					this.$ajax.GetAreas(dataA).then(res => {
						resolve(res.data);
					}).catch(res2 => {
						resolve(res2.data.data);
					})
				})
			},
			// 取消地址
			pickerCancel() {
				this.$emit("cancel", {
					checkArr: this.returnValue,
					defaultVal: this.pickVal,
					checkVal: this.areaValue,
					checkCity: this.checkCity
				});
				console.log(this.returnValue);
				this.showPicker = false;
			},
			//地址确认
			pickerConfirm(e) {
				this.$emit("confirm", {
					checkArr: this.returnValue, //返回的地址文字
					defaultVal: this.pickVal, //数组顺序
					checkVal: this.areaValue, //返回的地址id
					checkCity: this.checkCity //返回的城市
				});
				this.showPicker = false;
			},
			async bindChange(val) {
				let arr = val.detail.value; //选择的数组序列,如[3,0,1,0,0]表示选择的第四个省，第1个市，第二个区
				let year = "",
					month = "",
					day = "",
					hour = "",
					minute = "",
					province, city, area, street, provinceId, cityId, areaId; //省、市、区、街道、以及对应的id
				let checkArr = this.checkArr;
				let days = [];
				let mode = this.mode;
				switch (mode) {
					case "date":
						year = arr[0] < 1000 ? this.data.years[arr[0]] : arr[0];
						month = this.data.months[arr[1]];
						day = this.data.days[arr[2]];
						if (year != checkArr[0]) {
							days = initDays(year, month);
							this.data.days = days;
						};
						if (month != checkArr[1]) {
							days = initDays(year, month);
							this.data.days = days;
						};
						this.checkArr = [year, month, day];
						this.returnValue = year + "-" + month + "-" + day;
						break;
					case "yearMonth":
						year = arr[0] < 1000 ? this.data.years[arr[0]] : arr[0];
						month = this.data.months[arr[1]];
						this.checkArr = [year, month];
						this.returnValue = year + "-" + month;
						break;
					case 'hours':
					    year = arr[0] < 1000 ? this.data.years[arr[0]] : arr[0];
					    month = this.data.months[arr[1]];
					    day = this.data.days[arr[2]];
					    hour = this.data.hours[arr[3]];
					    if (year != checkArr[0]) {
					    	days = initDays(year, month);
					    	this.data.days = days;
					    };
					    if (month != checkArr[1]) {
					    	days = initDays(year, month);
					    	this.data.days = days;
					    };
					    this.checkArr = [year, month, day, hour];
					    this.returnValue = year + "-" + month + "-" + day + " " + hour
					    break;
					case "dateTime":
						year = arr[0] < 1000 ? this.data.years[arr[0]] : arr[0];
						month = this.data.months[arr[1]];
						day = this.data.days[arr[2]];
						hour = this.data.hours[arr[3]];
						minute = this.data.minutes[arr[4]];
						if (year != checkArr[0]) {
							days = initDays(year, month);
							this.data.days = days;
						};
						if (month != checkArr[1]) {
							days = initDays(year, month);
							this.data.days = days;
						};
						this.checkArr = [year, month, day, hour, minute];
						this.returnValue = year + "-" + month + "-" + day + " " + hour + ":" + minute;
						break;
					case "time":
						hour = this.data.hours[arr[0]];
						minute = this.data.minutes[arr[1]];
						this.checkArr = [hour, minute];
						this.returnValue = hour + ":" + minute;
						break;
					case "region":
						//获取change后的地址名称
						province = this.data.provinces[arr[0]].name;
						city = this.data.citys[arr[1]].name;
						if (this.data.areas.length) {
							area = this.data.areas[arr[2]].name;
						}
						if (this.data.streets.length) {
							// street = this.data.streets[arr[3]].name;
						}
						// 改动省份
						if (province != checkArr[0]) {
							provinceId = this.data.provinces[arr[0]].areasId; // 获取change后的地址省市区id
							var cityTemp = await this.getDatas(provinceId); //获取选择省份的第一个市拿到id,定义一个中间变量temp
							cityId = cityTemp[0].areasId;

							this.data.citys = await this.getDatas(provinceId);
							this.data.areas = await this.getDatas(cityId);

							var areaTemp = await this.getDatas(cityId);
							if (areaTemp.length) { //判断是否有第三级区域
								areaId = areaTemp[0].areasId;
								this.data.streets = await this.getDatas(areaId);
							} else {
								this.data.streets = [];
							}
							arr[1] = 0;
							arr[2] = 0;
							arr[3] = 0;
							city = this.data.citys[arr[1]].name;
							area = this.data.areas.length ? this.data.areas[arr[2]].name : '';
							// street = this.data.streets.length ? this.data.streets[arr[3]].name : '';
						};
						// 改动市
						if (city != checkArr[1] && province == checkArr[0]) {
							cityId = this.data.citys[arr[1]].areasId;
							var areaTemp = await this.getDatas(cityId);
							this.data.areas = await this.getDatas(cityId);
							if (areaTemp.length) {
								areaId = areaTemp[0].areasId;
								this.data.streets = await this.getDatas(areaId);
							}
							arr[2] = 0;
							arr[3] = 0;
							area = this.data.areas.length ? this.data.areas[arr[2]].name : '';
							// street = this.data.streets.length ? this.data.streets[arr[3]].name : '';
						}
						// 改动区
						if (area != checkArr[2] && city == checkArr[1]) {
							areaId = this.data.areas[arr[2]].areasId;
							console.log(areaId);
							this.data.streets = await this.getDatas(areaId);
							arr[3] = 0;
							// street = this.data.streets.length ? this.data.streets[arr[3]].name : '';
						}
						// 改动街道
						if (street != checkArr[3] && area == checkArr[2]) {
							// this.areaValue=this.data.streets[arr[3]].Id;
						}
						this.areaValue = areaId
						// if(arr[3]==0&&this.data.areas.length&&this.data.streets.length){//如果街道选择其它，则将id选为区
						// 	this.areaValue=this.data.areas[arr[2]].Id;
						// }
						this.checkArr = [this.data.provinces[arr[0]].name, this.data.citys[arr[1]].name, this.data
							.areas.length ? this.data.areas[arr[2]].name : '',
						];
						this.returnValue = this.data.provinces[arr[0]].name + this.data.citys[arr[1]].name + (this.data
							.areas.length ? this.data.areas[arr[2]].name : '');
						this.checkCity = this.data.citys[arr[1]].name;
						break;
					case "column":
						this.returnValue = this.columns[arr[0]];
						break;
				}
				this.pickVal = arr;
			},
			async initData() {
				let data = {};
				let data2 = {};
				let mode = this.mode;
				let year, month, day, hour, minute, province, city, area, street;
				if (mode == "region") {
					data = {
						provinces: await this.getAllRegion(),
						citys: await this.getDatas(11),
						areas: await this.getDatas(1101),
						streets: await this.getDatas(110101),
						// citys:await this.getDatas(1),
						// areas:await this.getDatas(2),
						// streets:await this.getDatas(3),
					}
				} else if (mode == "column") {
					
					data = {
						columns: this.columns
					}
				} else {
					data = initPicker(this.startYear, this.endYear, this.mode)
				}
				this.data = data;
				this.pickVal = this.defaultVal;
				switch (mode) {
					case "date":
						if (this.showNow) { //显示当前日期的调整
							let date = new Date();
							this.$set(this.defaultVal, 1, date.getMonth());
							this.$set(this.defaultVal, 2, date.getDate() - 1);
							year = data.years[this.defaultVal[0]];
							if (this.startYear != date.getFullYear()) {
								this.$set(this.defaultVal, 0, date.getFullYear());
								year = date.getFullYear()
							}

						} else {
							year = data.years[this.defaultVal[0]];
						}
						month = data.months[this.defaultVal[1]];
						day = data.days[this.defaultVal[2]];
						this.checkArr = [year, month, day];
						this.returnValue = year + "-" + month + "-" + day;
						break;
					case "yearMonth":
						if (this.showNow) { //显示当前日期的调整
							let date = new Date();
							this.$set(this.defaultVal, 1, date.getMonth());
							this.$set(this.defaultVal, 2, date.getDate() - 1);
							year = data.years[this.defaultVal[0]];
							if (this.startYear != date.getFullYear()) {
								this.$set(this.defaultVal, 0, date.getFullYear());
								year = date.getFullYear()
							}

						} else {
							year = data.years[this.defaultVal[0]];
						}
						month = data.months[this.defaultVal[1]];
						this.checkArr = [year, month];
						this.returnValue = year + "-" + month;
						break;
					case 'hours':
						if (this.showNow) { //显示当前日期的调整
							let date = new Date();
							this.$set(this.defaultVal, 1, date.getMonth());
							this.$set(this.defaultVal, 2, date.getHours() == 23 ? date.getDate() : date.getDate() - 1);
							this.$set(this.defaultVal, 3, date.getHours() == 23 ? 0 : date.getHours());
							year = data.years[this.defaultVal[0]];
						} else {
							year = data.years[this.defaultVal[0]];
						}
						year=data.years[this.defaultVal[0]];
						month = data.months[this.defaultVal[1]];
						day = data.days[this.defaultVal[2]];
						hour = data.hours[this.defaultVal[3]];
						this.checkArr = [year, month, day, hour];
						this.returnValue = year + "-" + month + "-" + day + " " + hour
						break;
					case "dateTime":
						if (this.showNow) { //显示当前日期的调整
							let date = new Date();
							this.$set(this.defaultVal, 1, date.getMonth());
							this.$set(this.defaultVal, 2, date.getHours() == 23 ? date.getDate() : date.getDate() - 1);
							this.$set(this.defaultVal, 3, date.getHours() == 23 ? 0 : date.getHours());
							this.$set(this.defaultVal, 4, date.getMinutes());
							year = data.years[this.defaultVal[0]];
						} else {
							year = data.years[this.defaultVal[0]];
						}
						// year=data.years[this.defaultVal[0]];
						month = data.months[this.defaultVal[1]];
						day = data.days[this.defaultVal[2]];
						hour = data.hours[this.defaultVal[3]];
						minute = data.minutes[this.defaultVal[4]];
						this.checkArr = [year, month, day, hour, minute];
						this.returnValue = year + "-" + month + "-" + day + " " + hour + ":" + minute;
						break;
					case "time":
						hour = data.hours[this.defaultVal[0]];
						minute = data.minutes[this.defaultVal[1]];
						this.checkArr = [hour, minute];
						this.returnValue = hour + ":" + minute;
						break;
					case "region":
							province = data.provinces[this.defaultVal[0]];
							city = data.citys[this.defaultVal[1]];
							area = data.areas[this.defaultVal[2]];
							this.checkArr = [province.Name, city.Name, area.Name];
							this.returnValue = province.Name + city.Name + area.Name;
							// this.areaValue = street.Id;
							this.checkCity = city.Name;
						break;
					case "column":
						this.returnValue = this.columns[0];
						break;
				}
			}
		},
		mounted() {
			this.initData();
		}
	}
</script>

<style lang="scss">
	.w-picker {
		.mask {
			position: fixed;
			z-index: 99999;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
			visibility: hidden;
			opacity: 0;
			transition: all 0.3s ease;
		}

		.mask.show {
			visibility: visible;
			opacity: 1;
		}

		.w-picker-cnt {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			transition: all 0.3s ease;
			transform: translateY(100%);
			z-index: 100000;
		}

		.w-picker-cnt.show {
			transform: translateY(0);
		}

		.w-picker-hd {
			display: flex;
			align-items: center;
			padding: 0 30upx;
			height: 88upx;
			background-color: #fff;
			position: relative;
			text-align: center;
			font-size: 17px;
			justify-content: space-between;

			.w-picker-btn {
				font-size: 30upx;
			}
		}

		.w-picker-hd:after {
			content: ' ';
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 1px;
			border-bottom: 1px solid #e5e5e5;
			color: #e5e5e5;
			transform-origin: 0 100%;
			transform: scaleY(0.5);
		}

		.item {
			text-align: center;
			line-height: 40px;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 16px;
		}

		.w-picker-view {
			width: 100%;
			height: 238px;
			overflow: hidden;
			background-color: rgba(255, 255, 255, 1);
			z-index: 666;
		}

		picker-view {
			height: 100%;
		}
	}
</style>